<template>
	<view class="Tools">
		<navbar myprops="诉讼费计算-九一律师咨询"></navbar>
		<view class="Tools-top">
			<image src="../../static/blueBG.png" mode=""></image>
			<view class="top-view" @click="left">
				<van-icon name="arrow-left" color="white" size="17px" /><text>取消</text>
			</view>
		</view>
		<view class="Tools-content">
			<view class="Tools-content-top">
				<view class="collaboration-content-vw-top-img">
					<image class="blue-img" src="../../../static/蓝背景.png" mode=""></image>
					<image v-if="this.name == 'susong'" class="lucency-img" src="../../../static/白诉讼费.png" mode=""></image>
					<image v-if="this.name == 'lvshif'" class="lucency-img" src="../../../static/白律师费.png" mode=""></image>
					<image v-if="this.name == 'siwang'" class="lucency-img" src="../../../static/白死亡赔偿.png" mode=""></image>
					<image v-if="this.name == 'fuyang'" class="lucency-img" src="../../../static/白抚养人.png" mode=""></image>
					<image v-if="this.name == 'lixi'" class="lucency-img" src="../../../static/白利息.png" mode=""></image>
					<image v-if="this.name == 'shangc'" class="lucency-img" src="../../../static/白伤残.png" mode=""></image>
				</view>
			</view>
			<view class="Tools-content-text" v-if="this.name == 'susong'">
				<text class="Tools-content-text1">诉讼费计算</text>
				<text class="Tools-content-text2">诉讼中，当事人需要交纳的诉讼费主要包括:(一)案件(三)受理费:证(二)申请费，如保全费、执行费:鉴定人、翻译人员、理算人员等交通住宿费等。其中人、受理费由原告预交，最终由败诉一方承担。保全费由申请人预交，最终由败诉一方承担。执行费执行后交纳。根据《诉讼费用交纳办法》规定，收费标准依据案件性质差别收费。</text>
			</view>
			<view class="Tools-content-text" v-if="this.name == 'lvshif'">
				<text class="Tools-content-text1">律师费计算</text>
				<text class="Tools-content-text2">律师服务费是律师事务所依法接受委托，指派律师办理法律事务,向委托人收取的服务报酬。律师服务收费可以根据不同的服务内容,采取计件收费、按标的额比例收费、计时收费、风险代理收费等收费方式。本工具仅计算按标的比例收费。</text>
			</view>
			<view class="Tools-content-text" v-if="this.name == 'siwang'">
				<text class="Tools-content-text1">死亡赔偿计算</text>
				<view>
					<text class="Tools-content-text2">残疾赔偿金根据受害人丧失劳动能力程度或者伤残等级,按照受诉法院所在地上一年度城镇居民人均可支配收入或者农村居民人均纯收入标准，自定残之日起按二十年计算。但六十周岁以上的,年龄每增加一岁减少一年:七十五周岁以上的,按五年计算。死亡赔偿金按照受诉法院所在地上一年度城镇居民人均可支配收入或者农村居民人均纯收入标准,按二十年计算。但六十周岁以上的,年龄每增加一岁减少一年；七十五周岁以上的，按五年计算。</text>
					<text>详细声明...</text>
				</view>
			</view>
			<view class="Tools-content-text" v-if="this.name == 'fuyang'">
				<text class="Tools-content-text1">被扶养人生活费计算</text>
				<view>
					<text class="Tools-content-text2">被扶养人是指受害人依法应当承担扶养义务的未成年人或者丧失劳动能力又无其他生活来源的成年近亲属。被扶养人生活费按照受诉法院所在地上一年度城镇居民人均消费性支出和农村居民人均年生活消费支出标准计算。被扶养人为未成年人的,计算至十八周岁:被扶养人无劳动能力又无其他生活来源的,计算二十年。但六十周岁以上的,年龄每增加一岁减少一年;七十五周岁以上的,按五年计算。</text>
					<text>详细声明...</text>
				</view>
			</view>
			<view class="Tools-content-text" v-if="this.name == 'lixi'">
				<text class="Tools-content-text1">利息计算</text>
				<text class="Tools-content-text2">借款人应当按照约定的期限支付利息。但是双方约定的利率超过合同成立时一年期贷款市场报价利率四倍的除外。“一年期贷款市场报价利率”，是指中国人民银行授权全国银行间同业拆借中心自2019年8月20日起每月发布的一年期贷款市场报价利率。</text>
			</view>
			<view class="Tools-content-text" v-if="this.name == 'shangc'">
				<text class="Tools-content-text1">伤残赔偿金计算</text>
				<view>
					<text class="Tools-content-text2">残疾赔偿金根据受害人丧失劳动能力程度或者伤残等级，按照受诉法院所在地上一年度城镇居民人均可支配收入或者农村居民人均纯收入标准,自定残之日起按二十年计算。但六十周岁以上的,年龄每增加一岁减少一年;七十五周岁以上的,按五年计算。死亡赔偿金按照受诉法院所在地上一年度城镇居民人均可支配收入或者农村居民人均纯收入标准,按二十年计算。但六十周岁以上的,年龄每增加一岁减少一年;七十五周岁以上的,按五年计算。</text>
					<text>详细声明...</text>
				</view>
			</view>
			<view class="Tools-content-data">
				<van-cell-group>
					<!-- 地区 -->
					<view @click="Open2" v-if="this.name == 'fuyang' || this.name == 'shangc' || this.name == 'siwang'">
						<van-field
							:value="region"
							label="地区"
							required
							readonly
							is-link
							placeholder="请选择"
							input-align="left"
						/>
					</view>
					<!-- 户口类型 -->
					<view @click="Open3" v-if="this.name == 'shangc' || this.name == 'siwang'">
						<van-field
					  :value="huk"
					  label="户口类型"
						required
						readonly
						is-link
					  placeholder="请选择"
					  input-align="left"
					/></view>
					<!-- 被扶养人 -->
					<view @click="Open5" v-if="this.name == 'fuyang'">
						<van-field
					  :value="foster"
					  label="被扶养人"
						required
						readonly
						is-link
					  placeholder="请选择"
					  input-align="left"
					/></view>
					<!-- 出生日期 -->
					<view @click="Open4" v-if="this.name == 'fuyang' || this.name == 'shangc' || this.name == 'siwang'">
						<van-field
						  :value="birthDate"
						  label="出生日期"
							required
							readonly
							is-link
						  placeholder="请选择"
						  input-align="left"
						/>
					</view>
					<!-- 被扶养人数 -->
					<view @click="Open6" v-if="this.name == 'fuyang'">
						<van-field
						  :value="people"
						  label="被扶养人数"
							required
							readonly
							is-link
						  placeholder="请选择"
						  input-align="left"
						/>
					</view>
				</van-cell-group>
				<van-cell-group>
				  <van-field
				    :value="values1"
						label="金额(元)"
						input-align="left"
				    placeholder="请输入"
						@input="inputhandler1"
						v-if="this.name == 'lixi'"
				  />
					<!-- 起算日期 -->
					<view @click="Open7" v-if="this.name == 'lixi'">
						<van-field
						  :value="birthDateqi"
						  label="起算日期"
							required
							readonly
							is-link
						  placeholder="请选择"
						  input-align="left"
						/>
					</view>
					<!-- 截至日期 -->
					<view @click="Open8" v-if="this.name == 'lixi'">
						<van-field
						  :value="birthDatejie"
						  label="截至日期"
							required
							readonly
							is-link
						  placeholder="请选择"
						  input-align="left"
						/>
					</view>
					<!-- 利率类型 -->
					<view @click="Open9" v-if="this.name == 'lixi'">
						<van-field
					  :value="rate"
					  label="利率类型"
						required
						readonly
						is-link
					  placeholder="请选择"
					  input-align="left"
					/></view>
					<!-- 利率 -->
					<van-field
					  :value="interestRate"
						label="利率(%)"
						input-align="left"
					  placeholder="请输入"
						v-if="this.name == 'lixi'"
						@input="inputhandler2"
					/>
					<!-- 伤残等级 -->
					<view @click="Open10" v-if="this.name == 'shangc'">
						<van-field
					  :value="maim"
					  label="伤残等级"
						required
						readonly
						is-link
					  placeholder="请选择"
					  input-align="left"
					/></view>
				</van-cell-group>
				<van-cell v-if="this.name == 'lvshif'" required title="省份" is-link :value="provalue" @click="clickopen" />
				<van-cell v-if="this.name == 'susong' || this.name == 'lvshif'" required title="案件类型" is-link :value="fildValue" @click="onclickss" />
				<van-cell v-if="this.name == 'susong' || this.name == 'lvshif'" required title="涉及财产" is-link>
					<uni-data-checkbox style="display: flex;" selectedColor="red" :localdata="sex1" @change="change"></uni-data-checkbox>
				</van-cell>
				<van-cell-group  v-if="this.name == 'susong' || this.name == 'lvshif'">
				  <van-field
				    :value="values"
						label="金额(元)"
						input-align="right"
				    placeholder="若涉及财产请输入金额"
						@input="inputhandler"
				  />
				</van-cell-group>
				<van-cell v-if="sl" title="受理费" :value="shouli" />
				<van-cell v-if="zx" title="执行费" :value="zhixing" />
				<van-cell v-if="bq" title="保全费" :value="baoquan" />
			</view>
		</view>
		<view class="content-btn">
			<van-button type="info" round block custom-style="font-size: 36rpx; background: #036faf;" @click="truehandler">开始计算</van-button>
		</view>
		<view class="content-btn1">
			<van-button plain type="info" round block custom-style="font-size: 36rpx; background: #EDEDED;">委托律师</van-button>
		</view>
	</view>
	<!-- 弹出层 -->
	<view>
		<!-- 案件类型 -->
		<van-popup :show="show" round position="bottom">
			<van-picker :columns="columns"
				:item-height="40"
				title="案件类型"
				show-toolbar
				@confirm="onConfirmaS"
				@cancel="onCancelaS" />
		</van-popup>
		<!-- 省份 -->
		<van-popup :show="show1" round position="bottom">
		  <van-cascader
				:value="cascaderValue"
				:options="options"
				@close="Close1"
				@finish="Finish1"
			/>
		</van-popup>
		<!-- 地区 -->
		<van-popup :show="show2" round position="bottom">
			<!-- <van-cascader
				:value="region"
				:options="options"
				@close="Close2"
				@finish="Finish2"
			/> -->
			<van-area :area-list="areaList" columns-num="2" title="地区" @cancel="Close2" @confirm="Finish2" />
		</van-popup>
		<!-- 户口类型 -->
		<van-popup :show="show3" round position="bottom">
			<van-picker :columns="colums1"
				:item-height="40"
				title="户口类型"
				show-toolbar
				@confirm="onConfirma1"
				@cancel="onCancela1" />
		</van-popup>
		<!-- 出生日期 -->
		<tui-datetime :type="2" :startYear="2015" :endYear="2024" ref="dateTime" @confirm="change4"></tui-datetime>
		<!-- 被扶养人 -->
		<van-popup :show="show5" round position="bottom">
			<van-picker :columns="colums2"
				:item-height="40"
				title="被扶养人"
				show-toolbar
				@confirm="onConfirma2"
				@cancel="onCancela2" />
		</van-popup>
		<!-- 被扶养人数 -->
		<van-popup :show="show6" round position="bottom">
			<van-picker :columns="colums3"
				:item-height="40"
				title="被扶养人数"
				show-toolbar
				@confirm="onConfirma3"
				@cancel="onCancela3" />
		</van-popup>
		<!-- 起算日期 -->
		<tui-datetime :type="2" :startYear="2015" :endYear="2024" ref="dateTimeqi" @confirm="change7"></tui-datetime>
		<!-- 截至时间 -->
		<tui-datetime :type="2" :startYear="2015" :endYear="2024" ref="dateTimejie" @confirm="change8"></tui-datetime>
		<!-- 利率类型 -->
		<van-popup :show="show7" round position="bottom">
			<van-picker :columns="colums4"
				:item-height="40"
				title="利率类型"
				show-toolbar
				@confirm="onConfirma4"
				@cancel="onCancela4" />
		</van-popup>
		<!-- 伤残等级 -->
		<van-popup :show="show8" round position="bottom">
			<van-picker :columns="colums5"
				:item-height="40"
				title="伤残等级"
				show-toolbar
				@confirm="onConfirma5"
				@cancel="onCancela5" />
		</van-popup>
	</view>
	<van-toast id="van-toast" />
</template>

<script>
	import tuiDatetime from "@/components/thorui/tui-datetime/tui-datetime.vue"
	import { gationTitle, gation, lawyerPrice } from "../../utils/utils";
	import Toast from '@vant/weapp/dist/toast/toast';
	import { areaList } from '@vant/area-data';
	export default {
		components:{
				tuiDatetime
		},
		data() {
			const options = [
			  {
			    text: '浙江省',
			    value: '330000',
			    children: [{ text: '杭州市', value: '330100' }],
			  },
			  {
			    text: '江苏省',
			    value: '320000',
			    children: [{ text: '南京市', value: '320100' }],
			  },
			];
			return {
				name: 'susong',
				province: false, // 省份显示和隐藏
				show: false, // 案件类型弹出框
				fildValue: '', // 案件类型数据
				id: [], // 案件类型id
				show1: false, // 省份弹出框
				provalue: '', // 省份单元格数据
				cascaderValue: '', // 省份数据
				show2: false, // 地区弹出框
				region: '', // 地区数据
				show3: false, // 户口类型
				huk: '', // 户口类型数据
				birthDate: '', // 出生日期数据
				values: '', // 金额
				values1: '', // 利息计算金额
				gender: 0, // 涉及财产
				options,
				columns: [], // 案件类型的数组
				colums1: ['城市户口','乡镇户口'],
				colums2: ['爷爷', '奶奶', '爸爸','妈妈'],
				colums3: [1,2,3,4,5,6,7,8,9],
				colums4: ['周利率', '月利率', '年利率','两年利率','三年利率'],
				colums5: ['一级','二级','三级','四级','五级','六级','七级','八级','九级'],
				sex1: [
					{
						text: '涉及',
						value: 0
					}, {
						text: '不涉及',
						value: 1,
					},
				],
				show5: false, // 被扶养人
				foster: '', // 被扶养人数据
				show6: false, // 被扶养人数
				people: '', // 被扶养人数
				birthDateqi: '', // 起算日期
				birthDatejie: '', // 截至日期
				show7: false, // 利率类型
				rate: '', // 利率类型数据
				interestRate: '', // 利率数据
				show8: false, // 伤残等级
				maim: '', // 伤残等级数据
				shouli: '' , // 受理费
				zhixing: '', // 执行费
				baoquan: '', // 保全费
				sl: false, // 受理费状态
				zx: false, // 执行费状态
				bq: false, // 保全费状态
				provinces: '', // 省数据
				city: '', // 市数据
				areaList,
			}
		},
		methods: {
			// 打开案件类型逻辑
			onclickss () {
				this.show = true
			},
			// 案件类型确定按钮逻辑
			onConfirmaS (e) {
				console.log(e.detail.value);
				this.id = e.detail.value.id;
				this.fildValue = e.detail.value.title;
				// console.log('selected:', value.title);
				this.show = false
			},
			// 案件类型取消选择的回调
			onCancelaS () {
				this.show = false;
			},
			// 涉及财产逻辑
			change(e){
				this.gender = e.detail.data.text
				console.log('e:',e.detail.data);
				console.log(this.gender);
			},
			// 金额逻辑
			inputhandler (e) {
				this.values = e.detail
				console.log(this.values);
			},
			// 打开省份逻辑
			clickopen () {
				this.show1 = true
			},
			// 省份选择完成后的逻辑
			Finish1(e) {
				const { selectedOptions, value } = e.detail;
				const fieldValue = selectedOptions
					.map((option) => option.text || option.name)
					.join('/');
				console.log(e);
				console.log(fieldValue);
				this.provalue = fieldValue
				this.show1 = false
			},
			// 省份关闭逻辑
			Close1() {
				this.show1 = false
			},
			//  打开地区逻辑
			Open2 () {
				this.show2 = true
			},
			// 地区关闭逻辑
			Close2 () {
				this.show2 = false
			},
			// 地区逻辑
			Finish2(e) {
				console.log(e.detail);
				// const { value, index } = e.detail;
				// const fieldValue = value
				// 	.map((option) => option.text || option.name)
				// 	.join('/');
				// this.province = selectedOptions[0]
				// this.city = 
				console.log(fieldValue);
				// this.region = fieldValue
				this.show2 = false
			},
			// 打开户口逻辑
			Open3 () {
				this.show3 = true
			},
			// 关闭户口逻辑
			Close3 () {
				this.show3 = false
				console.log(this.show3);
			},
			// 户口确定按钮逻辑
			onConfirma1 (e) {
				const { value } = e.detail;
				this.huk = value;
				console.log('selected:', value);
				this.show3 = false;
				console.log(this.show3);
			},
			// 户口取消选择的回调
			onCancela1 () {
				this.show3 = false;
				console.log(this.show3);
			},
			// 打开出生日期逻辑
			Open4 () {
				this.$refs.dateTime.show();
			},
			// 日期选择器确定按钮逻辑
			change4 (e) {
				console.log(e);
				this.birthDate = e.result;
			},
			// 打开被扶养人逻辑
			Open5 () {
				this.show5 = true
			},
			// 被扶养人确定按钮逻辑
			onConfirma2 (e) {
				const { value } = e.detail;
				this.foster = value;
				console.log('selected:', value);
				this.show5 = false
			},
			// 被扶养人取消选择的回调
			onCancela2 () {
				this.show5 = false;
			},
			// 打开被扶养人数逻辑
			Open6 () {
				this.show6 = true
			},
			// 被扶养人数确定按钮逻辑
			onConfirma3 (e) {
				const { value } = e.detail;
				this.people = value;
				console.log('selected:', value);
				this.show6 = false
			},
			// 被扶养人数取消选择的回调
			onCancela3 () {
				this.show6 = false;
			},
			// 金额逻辑
			inputhandler1 (e) {
				this.values1 = e.detail
				console.log(this.values1);
			},
			// 打开起算日期逻辑
			Open7 () {
				this.$refs.dateTimeqi.show();
			},
			// 起算日期确定按钮逻辑
			change7 (e) {
				console.log(e);
				this.birthDateqi = e.result;
			},
			// 打开截至日期逻辑
			Open8 () {
				this.$refs.dateTimejie.show();
			},
			// 截至日期确定按钮逻辑
			change8 (e) {
				console.log(e);
				this.birthDatejie = e.result;
			},
			// 打开利率类型逻辑
			Open9 () {
				this.show7 = true
			},
			// 利率类型确定选择的回调
			onConfirma4 (e) {
				const { value } = e.detail;
				this.rate = value;
				console.log('selected:', value);
				this.show7 = false;
				console.log(this.rate);
			},
			// 利率类型取消选择的回调
			onCancela4 () {
				this.show7 = false;
				console.log(this.show7);
			},
			// 金额逻辑
			inputhandler2 (e) {
				this.interestRate = e.detail
				console.log(this.interestRate);
			},
			// 打开伤残等级逻辑
			Open10 () {
				this.show8 = true
			},
			// 伤残等级确定选择的回调
			onConfirma5 (e) {
				const { value } = e.detail;
				this.maim = value;
				console.log('selected:', value);
				console.log(this.maim);
				this.show8 = false;
			},
			// 伤残等级取消选择的回调
			onCancela5 () {
				this.show8 = false;
				console.log(this.show8);
			},
			// 开始计算按钮逻辑
			truehandler () {
				let that = this
				that.sl = false
				that.zx = false
				that.bq = false
				// console.log(this.name);
				switch (this.name){
					case "susong": {
						// 是否输入案件类型
						if (that.fildValue) {
							// 判断是否涉及财产
							if (that.gender == '涉及') {
								let a = '1'
								// 若涉及财产是否输入
								if (that.values) {
									console.log(that.values);
									let arr = {
										id : that.id,
										type : a,
										price : that.values
									}
									gation(arr, (e) => {
										uni.showLoading({
											title: "正在计算"
										})
										setTimeout(() => {
											// console.log('诉讼计算',e);
											that.sl = true
											that.zx = true
											that.bq = true
											that.shouli = e.data.price1
											that.zhixing = e.data.price2
											that.baoquan = e.data.price3
											uni.hideLoading()
										}, 1000)
									})
								} else {
									Toast('请输入金额')
									break;
								}
							} else {
								let a = '2'
								let arr = {
									id: that.id,
									type: a
								}
								gation(arr, (e) => {
									uni.showLoading({
										title: "正在计算"
									})
									setTimeout(() => {
										// console.log('诉讼计算',e);
										that.sl = true
										that.zx = true
										that.bq = true
										that.shouli = e.data.price1
										that.zhixing = e.data.price2
										that.baoquan = e.data.price3
										uni.hideLoading()
									}, 1000)
								})
								break;
							}
						} else {
							Toast('请选择案件类型')
						}
						break;
					}
					case "lvshif": {
						// 是否输入省份 
						if (that.provalue) {
							if (that.fildValue) {
								if (that.gender == '涉及') {
									let a = '1'
									if (that.values) {
										let arr = {
											price : that.values
										}
										lawyerPrice(arr, (e) => {
											console.log('律师费计算',e);
											uni.showLoading({
												title: "正在计算"
											})
											setTimeout(() => {
												// console.log('诉讼计算',e);
												that.sl = true
												that.shouli = e.data.price1
												that.zhixing = e.data.price2
												that.baoquan = e.data.price3
												uni.hideLoading()
											}, 1000)
										})
									} else {
										Toast('请输入金额')
									}
								} else {
									Toast('请选择涉及财产')
								}
							} else {
								Toast('请选择案件类型')
							}
						} else {
							Toast('请选择省份')
						}
						break;
					}
					case 'siwang': {
						// if (this.pro)
						break;
					}
				}	
				// console.log('地区', this.region);
				// console.log('户口类型', this.huk);
				// console.log('出生日期', this.birthDate);
				// console.log('伤残等级', this.maim);
			},
			// 取消按钮逻辑
			left () {
				uni.navigateBack({
					delta: 1
				})
			},
		},
		onLoad(option) {
			if (Object.keys(option).length === 0) {
				console.log('数组为空');
				console.log(this.name);
			} else {
				console.log('数组不为空');
				this.name = option.name
				console.log(this.name);
			}
			// 获取案件类型
			gationTitle((e) => {
				console.log('诉讼类别', e);
				this.columns = e.data.title.map(item =>({
					...item,
					text: item.title
				}))
				// console.log(this.columns);
			})
		},
	}
</script>

<style lang="scss" scoped>
	.Tools {
		width: 100vw;
		height: 100vh;
		background-color: #EDEDED;
	}
	
	.Tools-top {
		width: 100vw;
		height: 300rpx;
		position: relative;
	}
	.Tools-top > image {
		width: 100vw;
		height: 300rpx;
	}
	.Tools-top > view {
		position: absolute;
		left: 36rpx;
		top: 40rpx;
		color: white;
		display: flex;
		align-items: center;
	}
	.Tools-top > view > text {
		display: block;
		width: 32px;
		height: 21px;
		margin-top: -5px;
		margin-left: 10rpx;
		font-size: 16px;
	}
	
	.Tools-content {
		width: 710rpx;
		background-color: white;
		border-radius: 24rpx;
		margin: 0 auto;
		position: relative;
		top: -102rpx;
		left: 0;
	}
	.Tools-content-top {
		width: 710rpx;
		height: 64rpx;
		background-color: #f5f6f8;
		border-radius: 24rpx 24rpx 0 0;
	}
	
	
	.collaboration-content-vw-top-img {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 300rpx;
		top: -60rpx;
		z-index: 2;
	}
	.blue-img {
		width: 120rpx;
		height: 120rpx;
	}
	.lucency-img {
		width: 80rpx;
		height: 80rpx;
		position: relative;
		left: -98rpx;
		top: 0;
	}
	
	.Tools-content-text {
		width: 656rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 0 auto;
		background-color: #f5f6f8;
	}
	.Tools-content-text > .Tools-content-text1 {
		font-weight: bold;
		font-size: 36rpx;
	}
	.Tools-content-text > view > text {
		font-size: 26rpx;
		line-height: 30rpx;
		color: #707793;
	}
	.Tools-content-text2 {
		color: #808080;
		font-size: 26rpx;
		line-height: 30rpx;
	}
	.content-btn {
		width: 670rpx;
		height: 88rpx;
		margin: 0 auto;
	}
	.content-btn1 {
		width: 670rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	
	::v-deep .checklist-box {
		margin-right: 20rpx !important;
	}
	
</style>
